<template>
  <div class="container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
    >
      <h3 class="title">房屋租赁管理系统</h3>

      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入账号"
          name="username"
          prefix-icon="el-icon-user-solid"
          type="text"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          ref="password"
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          name="password"
          prefix-icon="el-icon-lock"
          show-password
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
        >登录</el-button
      >

    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入正确的账号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入正确的密码"));
      } else {
        callback();
      }
    };
    return {
      //表单内容
      loginForm: {
        username: "",
        password: "",
      },
      //校验规则
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
        ],
      },
      loading: false,
      //上一次页面路径
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        // console.log(route, "登录页回到上次访问页面");
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$api.login(this.loginForm).then((res) => {
            if (res.data.success) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.loading = false;
              this.$store.dispatch("login", res.data.resultObj.token);
              this.$store.dispatch("userInfo", res.data.resultObj.user);
              this.$router.push({ path: this.redirect || "/" });
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          });
        } else {
          this.$message({
            message: "登录失败，请检查账号密码",
            type: "error",
          });
          return;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url("./../assets/back.jpg");
  background-size: 100% 100%;
  overflow: hidden;
  ::v-deep(input) {
    background: rgba(255, 255, 255, 0.8);
  }
  .login-form {
    width: 520px;
    max-width: 100%;
    padding: 35px;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 160px auto;
    background: rgba(255, 255, 255, 0.8);
  }
  .title {
    font-size: 26px;
    margin: 0px auto 40px auto;
    color: #000;
    text-align: center;
    font-weight: bold;
  }
}
</style>
